<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>主页</title>
		<script src="js/jquery.js" type="text/javascript" charset="UTF-8"></script>
		
		<script type="text/javascript">
			
 			var page = 1;
			var tablePage = 0;
			
			
			$(function(){
				showData();
			});
			//上一页
			function upPage(){		
				if(page > 1)
					page --;	
				showData();
			}
			// 下一页
			function downPage()
			{
				if(page < tablePage)
					page ++;	
				showData();
			}
			
			function showData(){
				
				$.ajax({
					url:'/kude/stu/query?page='+page,
					success:function(result){
						console.log(result.content);
						var rel = result.content;
						tablePage = result.totalPages; //总页数
						
						var htmlstr = "<table style='margin:0 auto;' width='80%' algin='center' border='1'>"+
									"<tr><th>ID</th><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></tr>";
						
						for(var i=0;i<rel.length;i++){
							var stu = rel[i];
							htmlstr += "<tr><td>"+stu.id+"</td><td>"+stu.name+"</td><td>"+stu.age+"</td><td>"+stu.sex+"</td>"+
							"<td><a href='update.html'>编辑</a>&nbsp;<a href='http://localhost:8888/kude/stu/delete/"+stu.id+"'>删除</a></td></tr>";
						}
						
						htmlstr +="<tr><td colspan='5' align ='right' style='padding-right: 360px'><a href='add.html'>添加</a>&emsp;&emsp;<a href='javascript:upPage();'>上一页</a>&emsp;&emsp;<a href='javascript:downPage();'>下一页</a></td></tr>"
						htmlstr += "</table>";
						
						$("#show").html(htmlstr);
						
					}
				});
				
			}
			
		</script>
	</head>
	

	<body>
		
		<h1 style="text-align: center;" >页面</h1>
		<hr>
		<div id = "show" >
			
		</div>
			<!-- http://localhost:8888/kude/启动页面 -->

		
		
	</body>
</html>